<template>
  <ProTable :data="data" :columns="columns" @selection-change="selectionChange" />
</template>
<script lang="ts">
import { ProTable, useTableColumns } from '..';
import { defineComponent, ref } from 'vue';

interface IDataItem {
  name: string;
  age1: string;
  age1_1: string;
  age1_1_1: string;
  age1_2: string;
  gender: string;
  date: string;
  url: string;
}
export default defineComponent({
  components: { ProTable },
  setup() {
    const genderOptions = [
      {
        label: '男',
        value: '1',
        color: 'primary',
      },
      {
        label: '女',
        value: '0',
        color: 'danger',
      },
      {
        label: '未知',
        value: '-1',
        color: 'warning',
      },
    ];
    const data = ref<IDataItem[]>([
      {
        name: '<iframe onload=alert(document.location)>',
        age1: '12',
        age1_1: '12',
        age1_1_1: '12',
        age1_2: '12',
        gender: '1',
        date: '2020-12-12 16:00:00',
        url: 'https://foruda.gitee.com/avatar/1676932653039749289/854479_lafen_1578933953.png',
      },
      {
        name: '路人乙',
        age1: '12',
        age1_1: '12',
        age1_1_1: '12',
        age1_2: '12',
        gender: '0',
        date: '2020-12-12 16:00:00',
        url: 'https://foruda.gitee.com/avatar/1676932653039749289/854479_lafen_1578933953.png',
      },
      {
        name: '路人丙',
        age1: '12',
        age1_1: '12',
        age1_1_1: '12',
        age1_2: '12',
        gender: '-1',
        date: '2020-12-12 16:00:00',
        url: 'https://foruda.gitee.com/avatar/1676932653039749289/854479_lafen_1578933953.png',
      },
    ]);
    const { columns } = useTableColumns<IDataItem>(() => [
      {
        type: 'selection',
      },
      {
        type: 'index',
      },
      {
        label: '名称',
        width: '100px',
        ellipsis: true,
        prop: 'name',
      },
      {
        label: '一级表头',
        prop: 'age1',
        children: [
          {
            label: '二级表头1',
            prop: 'age1_1',
            children: [
              {
                label: '三级表头',
                prop: 'age1_1_1',
              },
            ],
          },
          {
            label: '二级表头2',
            prop: 'age1_2',
          },
        ],
      },
      {
        label: '年龄',
        minWidth: '50px',
        prop: 'gender',
        options: genderOptions,
        type: 'enum',
      },
      {
        label: '日期',
        type: 'date',
        format: 'YYYY-MM-DD',
        prop: 'date',
      },
      {
        label: '图片',
        type: 'image',
        prop: 'url',
        width: '120px',
      },
    ]);
    const selectionChange = () => {
      console.log('11');
    };
    return {
      selectionChange,
      columns,
      data,
    };
  },
});
</script>
